<template>
    <div class="icons">
        <swiper :options="swiperOptioon">
            <swiper-slide v-for ="(page,aa) of pages" :key="aa">
                <div class="icon" v-for="item of page" :key="item.id">
                    <div class="icon-img">
                        <a href="">
                        <img class="icon-imgcontent" :src="item.imgUrl" >
                            <p class="icon-desc">{{item.desc}}</p> 
                        </a>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
        <div class="swiper-paginatioon"  slot="pagination"></div>
    </div>
</template>

<script>
   export default {
    name:'HomeIcons',
    data () {
        return {
            swiperOptioon:{
            pagination:'.swiper-paginatioon',
            loop:true,// 让轮播支持循环轮播  如果改成 false的话 
            },
            //循环数据
            icoList: [{
                id:'0001',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                desc:'景点门票'
            },{
                id:'0002',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png',
                desc:'夏日玩水'
            },{
                id:'0003',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png',
                desc:'故宫'
            },{
                id:'0004',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
                desc:'动植物园'
            },{
                id:'0005',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
                desc:'景点门票'
            },{
                id:'0006',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png',
                desc:'夏日玩水'
            },{
                id:'0007',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png',
                desc:'故宫'
            },{
                id:'0008',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
                desc:'动植物园'
            },{
                id:'0009',
                imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png',
                desc:'公园'
            }]
        }
    },
    //计算属性 实现轮播分页
    computed:{
        pages () {
            const pages = []
            this.icoList.forEach((item,index)=>{
                //(index / 8)  index 除以 8
                const page = Math.floor(index / 8)
                if(!pages[page]){
                    pages[page] = []
                }
                pages[page].push(item)
            })
            return pages
        }
    } 

   } 
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixin.styl'
.icons>>>.swiper-pagination-bullet
   margin: 0 5px
.swiper-paginatioon
    text-align: center
    width: 100%
    margin-right: 10px
.icons>>>.swiper-container
    height:0
    padding-bottom:50%
   .icon
      position:relative
      overflow:hidden
      float:left
      width:25%
      height:0
      padding-bottom:25%
      .icon-img
          position:absolute
          top:0
          left:0
          right:0
          bottom:.44rem
          box-sizing:border-box
          padding:.1rem
          .icon-imgcontent
            display:block
            margin:0 auto
            height:100%
          .icon-desc
            position:absolute
            left:0
            right:0
            bottom:0
            height:.44rem
            line-height:.80rem
            text-align:center
            color:$IconColor
            ellipsis()

             

</style>